﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tuding布局L模式演示</title>
<link href="../css/fixed_L.css" rel="stylesheet" type="text/css">
<style type="text/css">
span {
	display:block;
	border:1px solid #666666;
	overflow:hidden;
	text-align:center;
	background:#F1F1F1;
	font-weight: bold;
}
.ming span {
	background:#882D71 url(../img/grid.png) -1px 0 repeat;
	color:#000000;
}
.n1 span {
	background:#E673C9 url(../img/grid.png) -1px 0 repeat;
	color:#000000;
}
.n2 span {
	background:#F2B6E3 url(../img/grid.png) -1px 0 repeat;
	color:#882D71;
}
.wrapping {
	padding:1px 0;
}
</style>
</head>
<body class="fixed">
<h1>Tuding布局L模式演示</h1>
<hr />
<div class="wrapping m">
  <div class="ming"><span>m-default</span></div>
</div>
<div class="wrapping mn">
  <div class="ming"><span>m-default</span></div>
  <div class="ning n1"><span>n-default</span></div>
</div>
<div class="wrapping nm">
  <div class="ming"><span>m-default</span></div>
  <div class="ning n1"><span>n-default</span></div>
</div>
<div class="wrapping mnn">
  <div class="ming"><span>m-default</span></div>
  <div class="ning n1"><span>n1-default</span></div>
  <div class="ning n2"><span>n2-default</span></div>
</div>
<div class="wrapping nmn">
  <div class="ming"><span>m-default</span></div>
  <div class="ning n1"><span>n1-default</span></div>
  <div class="ning n2"><span>n2-default</span></div>
</div>
<div class="wrapping nnm">
  <div class="ming"><span>m-default</span></div>
  <div class="ning n1"><span>n1-default</span></div>
  <div class="ning n2"><span>n2-default</span></div>
</div>
<hr />
<div class="wrapping nm">
  <div class="ming" style="width:910px;"><span>m910</span></div>
  <div class="ning n1" style="width:30px"><span>n30</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:870px;"><span>m870</span></div>
  <div class="ning n1" style="width:70px"><span>n70</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:830px;"><span>m830</span></div>
  <div class="ning n1" style="width:110px"><span>n110</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:790px;"><span>m790</span></div>
  <div class="ning n1" style="width:150px"><span>n150</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:750px;"><span>m750</span></div>
  <div class="ning n1" style="width:190px"><span>n190</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:710px;"><span>m710</span></div>
  <div class="ning n1" style="width:230px"><span>n230</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:670px;"><span>m670</span></div>
  <div class="ning n1" style="width:270px"><span>n270</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:630px;"><span>m630</span></div>
  <div class="ning n1" style="width:310px"><span>n310</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:590px;"><span>m590</span></div>
  <div class="ning n1" style="width:350px"><span>n350</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:550px;"><span>m550</span></div>
  <div class="ning n1" style="width:390px"><span>n390</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:510px;"><span>m510</span></div>
  <div class="ning n1" style="width:430px"><span>n430</span></div>
</div>
<div class="wrapping nm">
  <div class="ming" style="width:470px;"><span>m470</span></div>
  <div class="ning n1" style="width:470px"><span>n470</span></div>
</div>
<hr />
<div class="wrapping mn">
  <div class="ming" style="width:910px;"><span>m910</span></div>
  <div class="ning n1" style="width:30px"><span>n30</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:870px;"><span>m870</span></div>
  <div class="ning n1" style="width:70px"><span>n70</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:830px;"><span>m830</span></div>
  <div class="ning n1" style="width:110px"><span>n110</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:790px;"><span>m790</span></div>
  <div class="ning n1" style="width:150px"><span>n150</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:750px;"><span>m750</span></div>
  <div class="ning n1" style="width:190px"><span>n190</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:710px;"><span>m710</span></div>
  <div class="ning n1" style="width:230px"><span>n230</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:670px;"><span>m670</span></div>
  <div class="ning n1" style="width:270px"><span>n270</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:630px;"><span>m630</span></div>
  <div class="ning n1" style="width:310px"><span>n310</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:590px;"><span>m590</span></div>
  <div class="ning n1" style="width:350px"><span>n350</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:550px;"><span>m550</span></div>
  <div class="ning n1" style="width:390px"><span>n390</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:510px;"><span>m510</span></div>
  <div class="ning n1" style="width:430px"><span>n430</span></div>
</div>
<div class="wrapping mn">
  <div class="ming" style="width:470px;"><span>m470</span></div>
  <div class="ning n1" style="width:470px"><span>n470</span></div>
</div>
<hr />
<div class="wrapping mnn">
  <div class="ming" style="width:310px;"><span>m310
    <hr />
    <div>demo</div>
    </span></div>
  <div class="ning n1" style="width:310px"><span>n310
    <hr />
    <div>demo</div>
    <div>demo</div>
    </span></div>
  <div class="ning n2" style="width:310px"><span>n310
    <hr />
    <div>demo</div>
    <div>demo</div>
    <div>demo</div>
    </span></div>
</div>
<div class="wrapping nmn">
  <div class="ming" style="width:310px; left:320px;"><span>m310
    <hr />
    <div>demo</div>
    <div>demo</div>
    </span></div>
  <div class="ning n1" style="width:310px"><span>n310
    <hr />
    <div>demo</div>
    </span></div>
  <div class="ning n2" style="width:310px"><span>n310
    <hr />
    <div>demo</div>
    <div>demo</div>
    <div>demo</div>
    </span></div>
</div>
<div class="wrapping nnm">
  <div class="ming" style="width:310px;"><span>m310
    <hr />
    <div>demo</div>
    <div>demo</div>
    <div>demo</div>
    </span></div>
  <div class="ning n1" style="width:310px"><span>n310
    <hr />
    <div>demo</div>
    </span></div>
  <div class="ning n2" style="width:310px"><span>n310
    <hr />
    <div>demo</div>
    <div>demo</div>
    </span></div>
</div>
<hr />
<div class="wrapping mnn">
  <div class="ming" style="width:470px;"><span>m470</span></div>
  <div class="ning n1" style="width:230px"><span>n230</span></div>
  <div class="ning n2" style="width:230px"><span>n230</span></div>
</div>
<div class="wrapping nmn">
  <div class="ming" style="width:470px; left:240px;"><span>m470</span></div>
  <div class="ning n1" style="width:230px"><span>n230</span></div>
  <div class="ning n2" style="width:230px"><span>n230</span></div>
</div>
<div class="wrapping nnm">
  <div class="ming" style="width:470px;"><span>m470</span></div>
  <div class="ning n1" style="width:230px"><span>n230</span></div>
  <div class="ning n2" style="width:230px"><span>n230</span></div>
</div>
<hr />
<div id="colophon">
  <address>
  <a href="http://www.bubujie.com/" target="_blank" class="logo"><img src="../img/logo_16px.gif" width="48" height="20" alt="步步街"></a> <em>Copyright ©</em> <a href="http://www.bubujie.com/" target="_blank">步步街银川网络商城</a> All Rights Reserved.
  </address>
</div>
</body>
</html>
